<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form_support,controls</title>
    <style>
        textarea {
            width: 100%;
            height: 200px;
        }
    </style>
</head>
<body>
<h1>支持的控件</h1>
<label>
<textarea class="form-control" rows="3">
    包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件：
    text、password、datetime、datetime-local、date、month、time
    week、number、email、url、search、tel 和 color
</textarea>
</label>
<p>
    只有正确设置了 type 属性的输入控件才能被赋予正确的样式。
</p>
<form action="">
    <label>
        <input type="text" class="form-control" placeholder="Text input">
    </label>

</form>
<!--    多选框-->
<div class="checkbox">
    <label>
        <input type="checkbox" value="">
        Option one is this and that&mdash;be sure to include why it's great
    </label>
</div>
<div class="checkbox disabled">
    <label>
        <input type="checkbox" value="" disabled>
        Option two is disabled
    </label>
</div>


<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
        Option one is this and that&mdash;be sure to include why it's great
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
        Option two can be something else and selecting it will deselect option one
    </label>
</div>
<div class="radio disabled">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
        Option three is disabled
    </label>
</div>
<!--下拉列表-->
<select class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>
<!--静态控件-->
<form class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <p class="form-control-static">email@example.com</p>
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
    </div>
</form>
<form class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <p class="form-control-static">email@example.com</p>
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
    </div>
</form>

<label>
<textarea class="form-control" rows="3">
    <form class="form-horizontal">
- 作用：让表单采用“水平布局”——label 与输入框左右并排，而不是上下堆叠。
- 实现原理：内部 `.form-group` 被设为 `display:flex;` 等，借助栅格系统把 label 和控件放在同一行。
    <div class="form-group">
- 作用：把“一行字段”包裹起来，提供底部间距（`margin-bottom: 15px`），并作为栅格行的容器。
- 习惯用法：每个字段（或一组对齐的字段）都套一个 `.form-group`，相当于 Bootstrap 的“行”。
    <label class="col-sm-2 control-label">
- `col-sm-2`：Bootstrap 栅格类，≥768 px 屏幕时占 2 列（总 12 列）。
- `control-label`：Bootstrap 3 专为水平表单增加的辅助类，主要做两件事：
  1. 让 label 文本垂直居中地对齐后面的输入框；
  2. 在表单校验出现错误状态时，自动继承错误颜色（`has-error` 时 label 变红）。
    <div class="col-sm-10">
- 栅格类，与前面的 `col-sm-2` 互补：2 + 10 = 12，占满一行。
- 里面放真正的控件（`<input>`、`<p class="form-control-static">` 等）。
    <p class="form-control-static">
- 作用：把一段“只读文本”渲染成与输入框同高、同内边距、同样字体，从而视觉上跟旁边控件对齐，看起来像是“静态值”。
- 典型场景：详情页、确认页里“邮箱已填写，不可改”这类纯展示字段。
    <input class="form-control">
- Bootstrap 全局表单控件类，一次性赋予：
  - `display:block; width:100%;`
  - 统一高度、边框、圆角、内边距、聚焦阴影等。
- 加上它，输入框就能与 `.form-group`、`.input-group` 等 Bootstrap 组件完美配合。

快速记忆口诀
- `form-horizontal` → 水平排列表单
- `form-group` → 一行字段容器
- `control-label` → 让 label 垂直居中并对齐控件
- `col-sm-*` → 响应式栅格
- `form-control` → 让输入框 100% 宽并统一样式
- `form-control-static` → 把纯文本“伪装”成输入框高度，方便对齐
</textarea>
</label>
<script type="module">

    // 锁定大版本，自动获取最新小版本
    import {marked} from 'https://cdn.jsdelivr.net/npm/marked@12/marked.esm.js';


    const inEl = document.getElementById('in');
    const outEl = document.getElementById('out');

    const render = () => outEl.innerHTML = marked.parse(inEl.value);
    inEl.addEventListener('input', render);
    render();          // 首屏
</script>

</body>
</html>